.doc > section.tools > article .details {
	
	> div.desc {
		padding: $pad * 0.5;
		color: $doc-mid;
		margin-bottom: 0.5em;
		
		code {
			color: $doc-dark;
			font-weight: bold;
		}
	}
	
	table {
		font-family: $monospace;
		width: 100%;
		border-spacing: 0;
		border: 0;
		
		tr:nth-child(odd) td {
			background: mix($doc-lighter, $doc-lightest, 40);
		}
		
		tr.match td {
			background: $doc-lighter;
			border-bottom: 1px dotted $doc-light;
		}
		
		tr.group:hover {
			@extend %selected-token;
		}
		
		td {
			padding: $pad * 0.5 $pad;
			vertical-align: top;
			
			&:first-child {
				font-weight: bold;
				white-space: nowrap;
				padding-right: 0;
			}
			
			&:nth-child(2) {
				color: $doc-mid;
				white-space: nowrap;
				border-right: 1px dotted $doc-light;
			}
			
			&:nth-child(3) {
				white-space: pre-wrap;
				width: 100%;
				color: $doc-black;
				user-select: text;
				user-select: contain;
				
				em {
					color: $doc-mid;
				}
			}
		}
	}
	
	span.hover {
		@extend %selected-token;
	}
	
	.group-1 { background: hsla(60, 100, 50, $details-group-alpha); }
	.group-2 { background: hsla(120, 100, 50, $details-group-alpha); }
	.group-3 { background: hsla(230, 100, 70, $details-group-alpha); }
	.group-4 { background: hsla(280, 100, 60, $details-group-alpha); }
	.group-5 { background: hsla(-10, 100, 60, $details-group-alpha); }
	.group-0 { background: hsla(30, 100, 50, $details-group-alpha); }
	.group-0, .group-1, .group-2, .group-3, .group-4, .group-5 { outline: 0.5px solid rgba($doc-black, 0.25); }
	
}